<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!-- 
	搜索结果列表
 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>简约书评网</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet"
	href="css/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/pager.css">
<style type="text/css">
.row>div {
	margin-bottom: 30px;
}
</style>

</head>
<body>

	<%@ include file="/header.jsp"%>

	<div class="container">

		<div class="page-header">
			<h4>搜索结果</h4>
			<hr>
		</div>

		<c:forEach items="${requestScope.books}" var="book" varStatus="status">
			<c:if test="${(status.index%6)==0}">
				<div class="row">
			</c:if>

			<div class="col-md-2 col-sm-2 jQueryEqualHeight3">
				<div class="card">
					<img class="card-img-top" height="140px" src="${book.picture}"
						alt="Card image">
					<div class="card-body">
						<h6 class="card-title">
							<a href="book/detail?bookId=${book.bookId}"> <c:if
									test="${book.title.length() gt 6}">
					${fn:substring(book.title, 0, 6)}..
					</c:if> <c:if test="${book.title.length() le 6}">
					${book.title}
					</c:if>
							</a>
						</h6>
					</div>
				</div>
			</div>

			<c:if test="${(status.index+1)%6==0 }">
	</div>
	</c:if>
	<c:if test="${status.last}">
		</div>
		<div class="container">
			<ul class="page row">
				<pg:pager url="book/queryBookByAuthorOrTitle"
					items="${requestScope.total}" export="currentPageNumber=pageNumber"
					maxPageItems="${param.pageSize}" maxIndexPages="4">
					<pg:param name="condition" value="${param.condition}" />
					<pg:param name="pageSize" value="${param.pageSize}" />
					<pg:first>
						<li class="page-item"><a class="page-link" href="${pageUrl}"
							class="page">首页</a></li>
					</pg:first>
					<pg:prev>
						<li class="page-item"><a class="page-link" href="${pageUrl }"
							class="page">«</a></li>
					</pg:prev>
					<pg:pages>
						<c:choose>
							<c:when test="${currentPageNumber eq pageNumber}">
								<li class="page-item active"><a class="page-link" href="#">${pageNumber}</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link"
									href="${pageUrl }">${pageNumber }</a></li>
							</c:otherwise>
						</c:choose>
					</pg:pages>
					<pg:next>
						<li class="page-item"><a class="page-link" href="${pageUrl }"
							class="page">»</a></li>
					</pg:next>
					<pg:last>
						<li class="page-item"><a class="page-link" href="${pageUrl }"
							class="page">尾页</a></li>
					</pg:last>
				</pg:pager>
			</ul>
		</div>
	</c:if>
	</c:forEach>


	<div></div>

	<div class="fixed-bottom">
		<%@ include file="/footer.jsp"%>
	</div>
</body>
</html>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-equal-height.min.js"></script>
<script type="text/javascript">
	function equal_height() {
		// Equal Card Height
		$('.jQueryEqualHeight1').jQueryEqualHeight();

		// Equal Card Height and Text Height
		$('.jQueryEqualHeight2').jQueryEqualHeight(
				'.card .card-body .card-text');
		$('.jQueryEqualHeight2').jQueryEqualHeight('.card');

		// Equal Card Height, Text Height and Title Height
		$('.jQueryEqualHeight3').jQueryEqualHeight(
				'.card .card-body .card-title');
		$('.jQueryEqualHeight3').jQueryEqualHeight(
				'.card .card-body .card-text');
		$('.jQueryEqualHeight3').jQueryEqualHeight('.card');
	}
	$(window).on('load', function(event) {
		equal_height();
	});
	$(window).resize(function(event) {
		equal_height();
	});
</script>